<!--
 - Author : 003.
 - Date   : 2018/9/25.
 - File   : 新建
 -->

<template>
  <div class="page">    
      <validator  name="vAccount">
        <div class="page-title">
          <Row>
            
            <i-col span="12">
              <Icon type="ios-medical" class="red-color"></Icon>订单名称:&nbsp;&nbsp;&nbsp;
            <i-input :value.sync="orderName" placeholder="请输入..." style="width: 300px"></i-input>
            </i-col>
            <!-- <i-col span="12"><i-button type="primary" @click="submit">提交</i-button></i-col> -->
          </Row>
          <div class="fixed-button"><i-button type="primary" size="large" @click="submit">提交</i-button></div>
          <Row>
            <i-col :xs="24" :sm="12" :md="12" :lg="6">
              <Icon type="ios-medical" class="red-color"></Icon>车牌号：<i-input 
                :value.sync="plateNumber"
                id="plateNumber"
                placeholder="请输入..."
                style="width: 150px">
            </i-col>
            <i-col :xs="24" :sm="12" :md="12" :lg="6"><Icon type="ios-medical" class="red-color"></Icon>导游姓名：<i-input
              :value.sync="guideName"
              placeholder="请输入..."
              style="width: 150px">
            </i-col>
            <i-col :xs="24" :sm="12" :md="12" :lg="6"><Icon type="ios-medical" class="red-color"></Icon>联系方式：<input
              class="terminal-name terminal-name1"
              v-model="phone"
              placeholder="请输入..."
              @blur="phoneValidFn"
              style="width: 150px">
            </i-col>
            <i-col :xs="24" :sm="12" :md="12" :lg="6">
              是否接受景区入园调整：
              <div :class="isAdjustTag?'is-check checked':'is-check'" @click="isAdjustVal"><Icon type="checkmark-round"></Icon></div>
              <!-- <Checkbox :checked.sync="isAdjust"></Checkbox> -->
            </i-col>
          </Row>
          <Row>
            <i-col :xs="24" :sm="12" :md="12" :lg="6"><Icon type="ios-medical" class="red-color"></Icon>入园时间：
              <Date-picker type="datetime"
                placeholder="选择日期"
                :options="options"
                style="width: 150px;display:inline-block;"
                format="yyyy-MM-dd HH:mm"
                @on-change="inTimeVal">
              </Date-picker>
            </i-col>
            <i-col :xs="24" :sm="12" :md="12" :lg="6">入园通道：
              <!-- <Radio-group :model.sync="inChannel">
                <Radio value="0">东门</Radio>
                <Radio value="1">西门</Radio>
              </Radio-group> -->
              <div :class="inChannelTag?'is-check checked':'is-check'" @click="inChannelVal"><Icon type="checkmark-round"></Icon></div>东门
              <div :class="!inChannelTag?'is-check checked':'is-check'" @click="inChannelVal"><Icon type="checkmark-round"></Icon></div>西门
            </i-col>
            <i-col :xs="24" :sm="12" :md="12" :lg="6"><Icon type="ios-medical" class="red-color"></Icon>拟抵达时间：
              <Date-picker
                type="datetime"
                placeholder="选择日期"
                :options="options"
                style="width: 150px;display:inline-block;"
                format="yyyy-MM-dd HH:mm"
                @on-change="arriveTimeVal">
              </Date-picker>
            </i-col>
            <i-col span="22">旅行社申请其他事项： <i-input type="text" :value.sync="remark" placeholder="请输入..." style="width:60%"></i-input></i-col>
          </Row>
        </div>        
        <div class="page-content">
          <table class="table table-order table-order-hover">
            <thead>
            <tr>
              <th><Icon type="ios-medical" class="red-color"></Icon>姓名</th>
              <th>证件类型</th>
              <th>证件号码</th>
              <th>特殊证件</th>
              <th>联系电话</th>
              <th>系统审核</th>
              <th>出票类型</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(index,item) in orderList" :class="index%2 ===0?'even':''">
              <td>
                <input class="terminal-name"
                  @blur="nameValid(item)"
                  type="text" style="width:90%"
                  placeholder="请输入姓名"
                  v-model="item.passengerName"
                  maxlength="5">
              </td>
              <td>
                <i-select :model.sync="item.papersType" style="width:90%">
                    <i-option v-for="subItem in item.papersTypeList" :value="subItem.value"  @click="selectPapersType(item,subItem)">{{ subItem.label }}</i-option>
                </i-select>
              </td>
              <td>
                <input class="terminal-name" type="text" placeholder="请输入身份证号码" style="width:90%"
                  v-model="item.idCard"
                  @blur="idCardValid(item)"
                  maxlength="18">
              </td>
              <td>
                <i-select :model.sync="item.specialPapersType" style="width:90%">
                    <i-option v-for="subItem in item.specialPapersTypeList" :value="subItem.value"  @click="selectSpecialPapersType(item,subItem)">{{ subItem.label }}</i-option>
                </i-select>
              </td>
              <td>
                <input
                  class="terminal-name"
                  type="text" style="width:90%"
                  placeholder="请输入联系电话"
                  v-model="item.phone"
                  maxlength="16">
              </td>
                <td>
                  {{item.examineType}}                  
                </td>
              <td>
                <i-select :model.sync="item.billType" style="width:90%">
                    <i-option v-for="subItem in item.billTypeList" :value="subItem.value" @click="selectBillType(item,subItem)">{{ subItem.label }}</i-option>
                </i-select>
              </td>
              <td><i-button type="error" v-if="orderList.length!== 1" @click="deleteFn(index)">删除</i-button></td>
            </tr>
            </tbody>
          </table>  
          <!-- <div class="add-order"><Icon type="plus-circled" @click="addOrder"></Icon></div>     -->
          <div class="add-order"><i-button type="primary" size="large" @click="addOrder">添加</i-button></div>
          <div class="page-footer" v-if="orderList.length  === 0">
            <div class="col-xs-12 no-data">
              {{nodataTxt}}
            </div>
          </div>
          <div class="fixed-ico" @click="back"><img src="../../assets/images/back-ico.png" alt=""></div>
        </div>
      </validator>
  </div>
</template>

<script>
  import {createTab} from '../../vuex/action';
  import {token, user} from '../../vuex/getter'
  import apiSource from '../../wohome-api'
  import {parseJSON, isSuccess} from '../../utils'
  import {isEmptyObject} from '../../utils/tool';
  import vMessage from '../../components/message'

  export default {
    data() {
      return {
        phoneValid: false,
        remark:'',
        plateNumber:'',
        phone:'',
        isAdjust:'T',//是否接受景区入园调整 T=接受 F=不接受
        isAdjustTag:true,
        inTime:'',
        inChannel:'0',//入园通道 0=东门，1=西门 ,
        inChannelTag:true,
        arriveTime:'',
        guideName:'',
        orderName:'',
        nodataTxt: '没有相关数据',
        orderList:[],
        options: {
            disabledDate (date) {
                return date && date.valueOf() < Date.now() - 86400000;
            }
        },  
      }
    },
    watch: {
      inChannelTag(val){
        console.log('######',val)
        if(val){
          this.inChannel='0'
        } else{
          this.inChannel='1'
        }
      },
      isAdjustTag(val){
        if(val){
          this.isAdjust = 'T'
        } else{
          this.isAdjust = 'F'
        }

      }
    },
    ready() {
      this.init()
    },
    validators: {
      strname: function(val) {
        // console.log(val);
        return /^[\u4e00-\u9fff\w]{2,10}$/.test(val)
      }
    },
    methods: {
      idCardValid (v) {
        if(v.papersType==='0'){
          if (/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(v.idCard)) {
            this.setIdCard(v)
            v.idCardValid = true
          } else {
            vMessage.error('请输入正确的身份证号码')
            v.idCardValid = false
          }
        } else{
          console.log('非二代身份证')
          this.setIdCard(v)
        }
      },
      nameValid (v) {
        if (!v.passengerName) {
          vMessage.error('姓名为必填项目')
          v.nameValid = false
        } else {
          v.nameValid = true
        }
      },
      phoneValidFn () {
        console.log(this.phone)
        if (/^1\d{10}$/.test(this.phone)) {
          this.phoneValid = true
        } else {
          vMessage.error('请填写正确的电话号码')
          this.phoneValid = false
        }
      },
      init(){
        this.addOrder()//添加一条orderList
        const date = new Date()
        let month = this.doble(date.getMonth() + 1)
        let year = this.doble(date.getFullYear())
        let day = this.doble(date.getDate())
        let hour = this.doble(date.getHours())
        let minute = this.doble(date.getMinutes())
        let second = this.doble(date.getSeconds())
        let ram1 = Math.floor(Math.random()*10).toString()
        let ram2 = Math.floor(Math.random()*10).toString()
        let ram3 = Math.floor(Math.random()*10).toString()
        // console.log('!!!!!!!!')
        this.orderName=year + month + day + hour + minute + second + ram1 + ram2 + ram3
      },
      addOrder(){
        this.orderList.push({
          years:'',
          examineType:'成人',
          passengerName:'',
          idCard:'',
          phone:'',
          specialPapersType:'5',
          papersType:'0',
          specialPapersTypeList:[{
            value: '5',
            label: '无'
          },{
            value: '0',
            label: '军官证'
          },{
            value: '1',
            label: '士兵证'
          },{
            value: '2',
            label: '退伍证'
          },{
            value: '3',
            label: '残疾证'
          },{
            value: '4',
            label: '学生证'
          }],
          papersTypeList: [{
            value: '0',
            label: '二代身份证'
          },{
            value: '1',
            label: '户口簿'
          },{
            value: '2',
            label: '港澳通行证'
          },{
            value: '3',
            label: '台湾通行证'
          },{
            value: '4',
            label: '护照'
          },{
            value: '5',
            label: '其他'
          }],
          billType:'3',
          billTypeList: [{
            value: '0',
            label: '全免'
          },{
            value: '1',
            label: '半价'
          },{
          //   value: '2',
          //   label: '特殊证件'
          // },{
            value: '3',
            label: '全票'
          }]
        })
        // if((index+1)<orderList.length){
        //   if(!orderList[index+1].passengerName&&!orderList[index+1].idCard){
        //     this.orderList.pop()
        //   }
      },
      /**
       * 输入身份证号
       */
      setIdCard (item) {
        this.countYears (item)
        if(item.papersType==='0'){
          if(item.specialPapersType==='5'){//没有特殊证件
            if(item.years<15){
              item.billType='0'
              item.examineType='15周岁以下'
            } else if(item.years>59){
              item.billType='0'
              item.examineType='60周岁以上'
            } else if(item.years>14&&item.years<18){
              item.billType='1'
              item.examineType='15-18周岁'         
            } else if(item.years>17&&item.years<60){//成人
              item.billType='3'
              item.examineType='成人'
            }
          } else {
              console.log('22222',item.years)
            if(item.years<15){
              item.billType='0'
              item.examineType='15周岁以下'
            }else if(item.years>59){
              item.billType='0'
              item.examineType='60周岁以上'
            } else{
              item.billType='1'
              item.examineType='特殊证件'
            }
          }
        }        
      },
      /**
       * 根据身份证号判断年龄
       */
      countYears(item){
        let year=new Date().getFullYear()-(item.idCard.substring(6,10))
          let month=item.idCard.substring(10,12)
          let day=item.idCard.substring(12,14)
          if(month===this.doble(new Date().getMonth()+1)){
            if(day>new Date().getDate()){
              // console.log('111没过生日')
              year--
            }else{
              // console.log('111过完生日')
            }
          } else if(month>this.doble((new Date().getMonth()+1))){
            // console.log('222没过生日')
            year--
          }
          console.log(year)
          item.years=year
      },
      /**
       * 选择证件类型
       */
      selectPapersType(item,subItem){
        console.log('选择证件类型',item)
        item.billType='3'
        item.examineType='成人'
      },
      /**
       * 选择特殊证件
       */
      selectSpecialPapersType(item,subItem){
          console.log('选特殊证件',subItem.value,item.years)
        if(subItem.value==='5'&&item.papersType==='0'){
          this.countYears (item)
          if(item.years<15){
            item.billType='0'
            item.examineType='15周岁以下'
          }else if(item.years>59){
            item.billType='0'
            item.examineType='60周岁以上'
          }else if(item.years>14&&item.years<18){
            item.billType='1'
            item.examineType='15-18周岁'         
          } else if(item.years>17&&item.years<60){//成人
            item.billType='3'
            item.examineType='成人'
          } 
        } else if(subItem.value==='5'&&item.papersType!=='0'){
          
        } else{
          if(item.years<15){
            item.billType='0'
            item.examineType='15周岁以下'
          }else if(item.years>59){
            item.billType='0'
            item.examineType='60周岁以上'
          }else if(item.years===0){
            item.billType='1'
            item.examineType='特殊证件'
          } else{            
            item.billType='1'
            item.examineType='特殊证件'
          }
        }  
      },
      /**
       * 选择出票类型
       */
      selectBillType(item,subItem){
        if(subItem.value==='3'){
          item.examineType='成人'
        }
      },
      deleteFn (index){
        this.orderList.splice(index,1)
      },
      isAdjustVal(){
        this.isAdjustTag=!this.isAdjustTag
        console.log(this.isAdjust,this.isAdjustTag,'isAdjustTag')
      },
      inChannelVal(){
        this.inChannelTag=!this.inChannelTag
        console.log(this.inChannelTag,'inChannelTag')
      },
      submit(){
        var invalid = !this.plateNumber || !this.guideName || !this.phone || !this.inTime || !this.arriveTime || !this.phoneValid
        // debugger
        // var orderListInvalid = this.orderList.every(v => v.idCardValid && v.nameValid)
        var orderListInvalid = this.orderList.every(v => {
          if(v.papersType==='0'){
            return v.idCardValid && v.nameValid
          } else{
            return v.nameValid
          }
        })
        if (invalid || !orderListInvalid) {
          vMessage.error('请完善表单')
          return
        }
        let orderList=this.orderList.map(e=>{
          return {
            idCard:e.idCard,
            passengerName:e.passengerName,
            phone:e.phone,
            billType:e.billType,
            papersType:e.papersType,
            specialPapersType:e.specialPapersType==='5'?'':e.specialPapersType
          }
        })
        let param={
          orderList: orderList,
          orderName: this.orderName,
          plateNumber:this.plateNumber,
          phone:this.phone,
          isAdjust:this.isAdjust,
          inTime:this.inTime,
          inChannel:this.inChannel,//入园通道 0=东门，1=西门 ,
          arriveTime:this.arriveTime,
          guideName:this.guideName,
        }
        if(this.remark){
          param.remark = this.remark
        }
        apiSource({
          type: 'outer',
          service: 'travelOrderPassengerAdd',
          ct: param
        }).then((res) => {
          vMessage.success('提交成功')
          this.back()
        })
      },
      inTimeVal(val){
        this.inTime=val
      },
      arriveTimeVal(val){
        this.arriveTime=val
      },
      back(){
        window.history.go(-1);
      },
      doble(val){
        if (val < 10) {
          return '0' + val
        }else{
          return val
        }
      }
    },
    vuex: {
      getters: {token, user},
      actions: {
        createTab
      }
    },
  }

</script>

<style lang="less" scoped>
 @import "../../assets/less/common.less";
  .page{
    .red-color{
      color: rgb(219, 1, 1);
      font-size: 12px;
      margin-right: 7px;
    }
    &-title{
      .ivu-radio-wrapper{
        font-size: 18px;
      }
    }
    .terminal-name {
      padding: 5px 10px;
      outline: 0;
      border: 1px solid #fff;
      border-radius: 5px;
      background: transparent;
    }
    .terminal-name1 {
      border: 1px solid #d7dde4;
    }
    .even .terminal-name{
      border: 1px solid rgb(218, 218, 218);
    }

    .terminal-name:hover,
    .terminal-name:focus {
      border: 1px solid #37B0EB;
    }
    
    .table-order {
      > thead > tr > th{
        min-width: 136px;
        box-sizing: border-box;
      }
      > tbody > tr:nth-of-type(even) {
        background-color: #fff;
      }
      > tbody > tr:nth-of-type(odd) {
        background-color: rgb(218, 218, 218);
      }
    }
    .table-order-hover {
      > tbody > tr:hover {
        background-color: rgb(241, 241, 241);
      }
    }
    .add-order{
      color: #37B0EB;
      font-size: 25px;
      text-align:center;
      cursor: pointer;
      .ivu-btn-large{
        padding: 10px 120px;
      }
    }
    .fixed-button{      
      right: 80px;
      bottom: 30px;
    }
  }
</style>
